<template>
	<div>

    <el-row :gutter="20">
      <el-col :span="6">
        <el-input
            style="width: 240px"
            placeholder="搜索采购单号"
            :prefix-icon="Search"
        />
      </el-col>
      <el-col :span="6">
        <el-select
            multiple
            clearable
            collapse-tags
            placeholder="搜索供应商"
            popper-class="custom-header"
            :max-collapse-tags="1"
            style="width: 240px"
        >
          <template #header>
            <el-input
                style="width: 240px"
                placeholder="搜索供应商"
                :prefix-icon="Search"
            />
          </template>
          <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select
            multiple
            clearable
            collapse-tags
            placeholder="搜索采购产品"
            popper-class="custom-header"
            :max-collapse-tags="1"
            style="width: 240px"
        >
          <template #header>
            <el-input
                style="width: 240px"
                placeholder="搜索采购产品"
                :prefix-icon="Search"
            />
          </template>
          <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-date-picker
            style="width: 300px;"
            type="daterange"
            range-separator="~"
            start-placeholder="预计"
            end-placeholder="到货日期"
        />
      </el-col>
    </el-row>

    <div style="height: 20px;"></div>

    <el-card shadow="hover">
      <template #header>
        <div style="display: flex; justify-content: space-between;">
          <div>
            <span style="font-size: 16px;">采购订单跟踪</span>
          </div>
          <div>

          </div>
        </div>
      </template>
      <el-table style="width: 100%" height="470">
        <el-table-column fixed prop="date" label="Date" width="150" />
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="state" label="State" width="120" />
        <el-table-column prop="city" label="City" width="320" />
        <el-table-column prop="address" label="Address" width="600" />
        <el-table-column prop="zip" label="Zip" width="120" />
      </el-table>
    </el-card>

    <div style="height: 20px;"></div>

    <el-card shadow="hover">
      <template #header>
        <div style="display: flex; justify-content: space-between;">
          <div>
            <span style="font-size: 16px;">已完成采购订单</span> <span style="font-size: 14px;color: #9a9494">共 40 条</span>
          </div>
          <div>
            <el-input
                style="width: 240px;margin-right: 5px;"
                placeholder="搜索采购单号"
                :prefix-icon="Search"
            />

            <el-tooltip
                class="box-item"
                effect="light"
                content="导入"
                :show-arrow="false"
                placement="top"
            >
              <el-button class="pv_MyButton">
                <img class="pv_myImg" src="/images/svg/导入.svg">
              </el-button>
            </el-tooltip>

            <el-tooltip
                :show-arrow="false"
                class="box-item"
                effect="light"
                content="导出"
                placement="top"
            >
              <el-button class="pv_MyButton">
                <img class="pv_myImg" src="/images/svg/导出.svg">
              </el-button>
            </el-tooltip>

            <el-tooltip
                :show-arrow="false"
                class="box-item"
                effect="light"
                content="创建"
                placement="top"
            >
              <el-button type="primary">
                <el-icon size="18"><Plus /></el-icon>
              </el-button>
            </el-tooltip>

          </div>
        </div>
      </template>
      <el-table style="width: 100%" height="470">
        <el-table-column fixed prop="date" label="Date" width="150" />
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="state" label="State" width="120" />
        <el-table-column prop="city" label="City" width="320" />
        <el-table-column prop="address" label="Address" width="600" />
        <el-table-column prop="zip" label="Zip" width="120" />
      </el-table>
    </el-card>

	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
  import {Plus, Search, Setting} from "@element-plus/icons-vue";
	const title = ref('采购订单跟踪');

  const cities = ref([]);

</script>

<style scoped lang="scss">

.pv_myImg {
  width: 20px;
  height: 20px;
}

.pv_MyButton{
  border-color: #3ea1f7;
}
	
</style>